<template>
  <div class="row" :style="{ width: isSingle && '100%', alignItems }">
    <div class="label" :style="{ width: labelWidth }">
      <slot v-if="$slots.label" name="label" />
      <span v-else>{{ label }}</span>
    </div>
    <div class="value" :class="!wrap && 'no-wrap'">
      <slot v-if="$slots.default" />
      <span v-else :title="value" >{{ value }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 单行
    isSingle: Boolean,

    label: String,

    // 值
    value: [String, Number],

    // label宽度
    labelWidth: { String, default: '151px' },

    // 垂直对齐方式
    alignItems: { String, default: 'center' },
    wrap: { type: Boolean, default: false }
  }
}
</script>

<style lang="scss" scoped>
.row {
    display: flex;
    align-items: center;
    padding-right: 10px;
    width: 50%;

    .label {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC, Microsoft YaHei, sans-serif;
        font-weight: 400;
        color: #909399;
        line-height: 32px;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap;
        width: 154px !important;
        span {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC, Microsoft YaHei, sans-serif;
          font-weight: 400;
          color: #909399;
        }
        /deep/ .iconfont {
            margin: 0px 6px;
            color: #FFA940;
            font-size: 14px;
        }
        /deep/ .active {
            color: #FFA940;
        }
    }

    .value {
        line-height: 32px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC, Microsoft YaHei, sans-serif;
        font-weight: 400;
        color: #606266;
        &.no-wrap {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        flex: 1;
        /deep/ .row {
            .label {
                width: auto !important;
                color: #606266;
            }
        }
        span {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC, Microsoft YaHei, sans-serif;
          font-weight: 400;
          color: #606266;
          white-space: nowrap;
        }
        #audioid {
            display: block;
        }
        /deep/ .el-link{
          &.ct-link-style.el-link--default{
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            display: inline-block;
            width: 100%;
          }
        }
    }
}
.single {
    width: 100%;
}
</style>
